@import "./common.less";
.login-page{
  padding-bottom: 42px;
  .login-form{
    position: absolute;
    left:50%;
    top:50%;
    margin-left:-450px;
    margin-top:-200px;
    width:900px;
    height:400px;
    padding:24px;
    .flex(flex-start,center);
    .bg-img{
      width:354px;
      img{
        width:100%;
      }
    }
    .form{
      width:~'calc(100% - 354px)';
      .logo{
        width:190px;
        height:45px;
        background: rgb(240, 67, 63);
        text-align: center;
        padding-top:8px;
        img{
          filter: invert(1) hue-rotate(0deg) sepia(0) grayscale(1) brightness(10);
        }
      }
      .text{
        font-size:28px;
        color:rgba(36, 33, 44, 0.9);
        line-height:40px;
        height:40px;
      }
      .sub-text{
        font-size: @mFont;
        color:rgba(0, 0, 0, 0.74);
        line-height:20px;
      }
      .el-input__inner{
        border-left:0;
        border-right:0;
        border-top:0;
        border-radius: 0;
        padding:0;
      }
      .el-button{
        border-radius: 0;
      }
    }

  }


}

.layout-div{
  padding-left:45px;
  .left{
    width:45px;
    height:100%;
    background: rgb(233, 232, 232);
    position: fixed;
    left:0;
    top:0;
    .top{
      padding-top:40px;

    }
    .bottom{
      position: fixed;
      bottom:40px;
      width:45px;
      .left-btn{
        height:40px;
        line-height:40px
      }

    }
    .left-btn{
      height:55px;
      width:100%;
      text-align: center;
      line-height:55px;
      color:rgba(16, 16, 16, 0.62);
      cursor: pointer;
      .iconfont{
        font-size:24px;
      }
    }
    .left-btn.active{
      background: @themeColor;
      color:#fff;
    }
    .left-btn.active:hover{
      background: @themeColor;
    }
    .left-btn:hover{
      background: @bgColor;
    }
  }
  .right{
    width:~'calc(100% - 45px)';
    height:100%;
    overflow: auto;
  }
}
.page{
  min-width:800px;

}
.home-page{
  padding-bottom:45px;
  .page-con{
    .flex(flex-start,flex-start);
    padding:24px;
    .home-left{
      width:300px;
      .title{
        font-size:44px;
        color:@themeColor;
        padding:20px 0;
        border-bottom:2px solid rgba(0,0,0,0.3);
      }
      .link-div{
        padding-top:10px
      }
      .link-sub-title{
        font-size:24px;
        padding:10px 0;
        color:@duckGrayFont;
        cursor: pointer;
        img{
          vertical-align: middle;
          margin-right:10px;
        }
        span{
          vertical-align: middle;
        }
      }
      .link-sub-title:hover{
        text-decoration: underline;
      }
      .link-sub-title.active{
        color:@themeColor
      }

      .link-sub-li{
        font-size:@bbFont;
        line-height:40px;
        color:#888;
        cursor: pointer;
      }
      .link-sub-li:hover{
        color:@duckGrayFont
      }
    }
    .home-right{
      width:~'calc(100% - 300px)';
      min-height:700px;
      padding-left:40px;
      background: url("../img/bgimgG.png") center right no-repeat;
      .home-con{
        width:100%;
        height:560px;
        background: #f6f8fc;
        border-top:2px solid @themeColor;
        margin-top:99px;

        .new-file{
          padding:16px;
          .file-title{
            font-size:18px;
            color:#000;
            font-weight: bold;
          }
          .file-sub-title{
              font-size:@mFont;
              color:@duckGrayFont;
              margin-top:20px;
          }
        }
        .open-file{
          .file-list{
            padding-top:20px;
            .file-item{
              padding:5px 20px;
              cursor: pointer;
              .flex(flex-satrt,flex-start);
              .file-left{
                  width:~'calc(100% - 80px)';
                  .title{
                    font-size:@mFont;
                    color:@fontColor;
                    line-height:30px;
                    .text-overflow(1);
                  }
                  .sub-title{
                    font-size:@sFont;
                    color:@grayFont;
                    line-height:20px;
                  }
              }
              .file-right{
                width:80px;
                text-align: right;
                .time{
                  font-size:@mFont;
                  color:@fontColor;
                  line-height:30px;
                }
                .del{
                  font-size:@sFont;
                  line-height:20px;
                  display: none;
                }
              }
            }
            .file-item:hover{
              background:rgba(39, 72, 168, 0.08) ;
            }
          }
        }

      }
    }

  }
  .page-bottom{
    position: fixed;
    width:100%;
    height:45px;
    line-height:45px;
    background: #fff;
    padding: 0 24px;
    bottom:0;
    color:@fontColor;
    span{
      font-size:@mFont;
      vertical-align: middle;
      margin-right:8px;
      display: inline-block;
    }
    img{
      vertical-align: middle;
      display: inline-block;
    }
    .user-name{
      position: relative;
    }
    .user-name::after{
      width: 1px;
      height: 15px;
      background: #e0e0e0;
      content: " ";
      position: absolute;
      right: -8px;
      top: 16px;
    }
  }
  .pagination-div{
    text-align: right;
  }

}

.setting-page{
  padding:20px;
  padding-bottom:80px;
    .setting-title{
      margin-top:20px;
      color:#e54941;
      font-size:26px;
      height:38px;
      line-height: 38px;
    }
  .setting-form{
    width:800px;
    .form-title{
      font-size:@bFont;
      font-weight:bold;
      color:@fontColor;
      line-height:30px;
      padding-left:15px;
      position: relative;
      margin-top:15px;
    }
    .form-title:after{
      position: absolute;
      content:" ";
      width:3px;
      height:15px;
      top:7px;
      background:rgba(0, 0, 0, 0.67);
      left:0px;
    }
    .form-div{
      margin-top:20px;
      padding-left:20px;
    }
    .el-card__header{
      padding:10px 18px;
    }
  }
  .setting-page-bottom{
    position: fixed;
    width:~'calc(100% - 45px)';
    min-width:900px;
    height:50px;
    line-height:50px;
    bottom:0;
    left:45px;
    background: #f5f5f5;
    .flex(flex-start,center);
    .img{
      width:176px;
      height:30px;
      padding-left:20px;
      img{
        width:100%;
      }
    }
    .right-link-div{
      width:~'calc(100% - 176px)';
      text-align: right;
      .link-btn{
        font-size:@sFont;
        color:@duckGrayFont;
        font-weight:bold;
        margin:0 10px;
        display: inline-block;
        cursor: default;
        line-height:30px;
      }
      .link-btn.active{
        font-size:@mFont;
        color:#000;
        border-bottom:2px solid @themeColor;
      }
      .next-btn{
        margin-left:80px;
        display: inline-block;
        .el-button{
          height:50px;
          border-radius: 0;
        }
      }
    }
  }
}